<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
       <br>
        <div class="bk">
          <el-input   placeholder="商品名" v-model="goodsName"></el-input>
        <el-button class="ss el-icon-search" type="primary" @click="select">搜索</el-button>
        <el-button class="ss" type="info" @click="add">添加</el-button>
           <!-- 信息 -->
       
        <el-table :data="omoList" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="id" label="序号" > </el-table-column>
          <el-table-column  label="缩略图" >
            <template #default="scope">
                  <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.goodsSmallLogo"
                  :fit="fit"
                  ></el-image>
                <!-- <img :src="scope.row.goodsSmallLogo"> -->
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名">
          </el-table-column>
          <el-table-column prop="goodsPrice" label="价格" >
          </el-table-column>
           <el-table-column prop="goodsWeight" label="重量" >
          </el-table-column>
           <el-table-column prop="goodsNumber" label="数量" >
          </el-table-column>
          <el-table-column label="上/下架" >   
            <template #default="scope">
          
                <el-switch
                  v-model="scope.row.chkStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
               
             
              </template>
          </el-table-column>
             <el-table-column label="是否首页" >   
            <template #default="scope">
          
                <el-switch
                  v-model="scope.row.isLayout"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
               
             
              </template>
          </el-table-column>
          <el-table-column prop="createStamp" label="发布时间" >
          </el-table-column>
          <el-table-column label="操作">
                    <el-dropdown>
                <span class="el-dropdown-link">
                 选择操作
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item >基本编辑</el-dropdown-item>
                    <el-dropdown-item>编辑头像</el-dropdown-item>
                    <el-dropdown-item>编辑详细</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
          </el-table-column>
        </el-table>
                <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
    </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive,computed,toRefs,onMounted} from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service'
interface DataProps{
      goodsName:string,
      pageNo:number,
      pageSize:number,
      select:()=>void,
      omoList:[],
      add:()=>void,
      handleSizeChange:(val: number)=>void,
      handleCurrentChange:(val: number)=>void,
      count:number
}
export default {
  name:'goods',
  setup(){
    const router = useRouter();
    const data:DataProps=reactive({
      goodsName:"",
      pageNo:1,
      pageSize:5,
      omoList:[],
      count:0,
        handleSizeChange:(val: number)=>{
          data.pageSize=val
          data.select()
      },
      handleCurrentChange:(val: number)=>{
            data.pageNo=val
             data.select()
      },
      select:()=>{
  httpRequest
  .request({
    url: '/goods/listgoods',
    method: 'post',
    data:{
      goodsName:data.goodsName,
      pageNo:data.pageNo,
      pageSize:data.pageSize
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    // data.count=res.data.count
    data.omoList=res.data.rows
    data.count=res.data.count
    console.log(res);
    
  })
    },
    add:()=>{
      router.push("/goodsadd")
    }
    })
    onMounted(()=> {
      data.select()
    })
  const refData=toRefs(data)
  return{
    ...refData
  }

  }

}
</script>

<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}

.el-button {
 
  width: 30px;
  height: 20px;
 padding:  0;
  font-size: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-input{
  width: 100px;
  float: left;
}
.ss{
  float: left;
  width: 60px;
  height:40px;
  margin-left:10px;
}
.dialog-footer{
  margin-top:-20px;
  float: left;
}
.yh{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:15px;
  line-height:45px;
}
.yh .el-input{
    width:80%;
    height:25px;
    margin: 0px 0;
    
}
.dia1{
  height: 400px;
}
.bj{
  width: 50px;
  height:30px;
  margin-left: 200px;
  margin-top: 10px;
}
.foot2{
  float: right;
}
.op{
  margin-left:-210px;
  margin: auto 0;
}


</style>